<template>
  <div class="app-container">
    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
      <el-tab-pane name="dpp">
        <span slot="label">
          <i class="el-icon-s-order"></i>&nbsp;待铺排
        </span>
      </el-tab-pane>
      <el-tab-pane name="ypp">
        <span slot="label">
          <i class="el-icon-s-claim"></i>&nbsp;已铺排
        </span>
      </el-tab-pane>
    </el-tabs>

    <div class="filter-container">
      <el-form :inline="true" label-position="right" label-width="120px">
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.projectName" placeholder="项目名称" />
        </el-form-item>
        <!-- <el-form-item label="权利人">
          <el-input v-model="listQuery.number" placeholder="权利人" />
        </el-form-item>-->
        <!-- <el-form-item label="身份证号">
          <el-input v-model="listQuery.number" placeholder="身份证号" />
        </el-form-item>-->
        <el-form-item label="所在区县">
          <el-select @change="changePage(1)" placeholder="所在区县" v-model="listQuery.districtId">
            <el-option v-for="(item, index) in districtData" :key="index" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库备案时间">
          <el-col :span="11">
            <el-date-picker style="width: 100%;" type="date" placeholder="选择开始日期" v-model="listQuery.storingRecordTimeFrom"></el-date-picker>
          </el-col>
          <el-col style="text-align: center;" :span="2">至</el-col>
          <el-col :span="11">
            <el-date-picker style="width: 100%;" type="date" placeholder="选择截至日期" v-model="listQuery.storingRecordTimeTo"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button @click="changePage(1)" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- <div class="filter-container">
        <el-button class="filter-item" type="primary" icon="el-icon-plus">项目计划铺排</el-button>
    </div>-->

    <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
      <el-table-column prop="projectName" label="项目名称"></el-table-column>
      <el-table-column prop="projectLocation" label="项目所在地"></el-table-column>
      <el-table-column prop="qlr" label="权利人"></el-table-column>
      <el-table-column prop="storingRecordStartTime" label="入库备案时间"></el-table-column>
      <el-table-column prop="jsjsy" label="减少建设用地面积（公顷）"></el-table-column>
      <el-table-column label="铺排年份">
        <template slot-scope="scope">{{ tabActiveName == "dpp" ? "暂未铺排" : "铺排时间" }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleSpread(scope.row)">项目计划铺排</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @current-change="changePage" :page-size="listQuery.size" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <el-dialog :close-on-click-modal="false" width="30%" title="项目计划铺排" :visible.sync="dialog">
      <el-form label-width="90">
        <el-form-item label="铺排时间：">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.distributeDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSpreadSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryAllDistrict, getYppList, getDppList, saveDate, saveSpread } from "@/api/project/xmkgh/xmspread";

export default {
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        projectName: null,
        districtId: null,
        storingRecordTimeFrom: null,
        storingRecordTimeTo: null
      },
      form: {
        projectId: null,
        distributeDate: null
      },
      tabActiveName: "dpp",
      districtData: [],
      dialog: false
    };
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      let fun = null;
      if (this.tabActiveName == "dpp") {
        fun = getDppList;
      }
      if (this.tabActiveName == "ypp") {
        fun = getYppList;
      }
      fun(this.listQuery).then(res => {
        this.listLoading = false;
        this.list = res.data.rows;
        this.total = res.data.total;
      });
    },
    changePage(page) {
      this.listQuery.page = page;
      this.fetchData();
    },
    queryAllDistrict() {
      queryAllDistrict().then(res => {
        this.districtData = res.data;
      });
    },
    handleTabClick(tab, event) {
      // if (this.tabActiveName != "tzx") {
      // this.clearListQuery();
      this.changePage(1);
      // }
    },
    clearListQuery() {
      this.listQuery["projectName"] = null;
      this.listQuery["number"] = null;
    },
    handleSpread(row) {
      this.dialog = true;
      this.form.projectId = row.projectId;
      this.form.distributeDate = this.getTime();
    },
    handleSpreadSubmit() {
      saveSpread(this.form).then(res => {
        this.dialog = false;
        this.$message({
          message: '处理成功',
          type: 'success'
        });
        this.fetchData();
      });
    },
    getTime() {
      var timeStr = "-";
      var curDate = new Date();
      var curYear = curDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var curMonth = curDate.getMonth() + 1 < 10 ? "0" + (curDate.getMonth() + 1) : curDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var curDay = curDate.getDate() < 10 ? "0" + curDate.getDate() : curDate.getDate(); //获取当前日(1-31)
      var curHour = curDate.getHours() < 10 ? "0" + curDate.getHours() : curDate.getHours(); //获取当前小时数(0-23)
      var curMinute = curDate.getMinutes() < 10 ? "0" + curDate.getMinutes() : curDate.getMinutes(); // 获取当前分钟数(0-59)
      var curSec = curDate.getSeconds() < 10 ? "0" + curDate.getSeconds() : curDate.getSeconds(); //获取当前秒数(0-59)
      var Current = curYear + timeStr + curMonth + timeStr + curDay + " " + curHour + ":" + curMinute + ":" + curSec;
      return Current;
    }
  },
  created() {
    this.queryAllDistrict();
    this.fetchData();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  color: #999;
}
</style>